import base from "../base.js";
// 引用影厅接口
import theaters from "../../api/theaters"

const theatersProps = [{
    name: "选择影院",
    key: "cinemasId"
},{
    name: "新增影厅",
    key: "theatersName"
}, {
    name: "是否营业",
    key: "theatersStatus"
}
]
export default class extends base {
    // 定义页面用户输入的数据默认值，后期可以直接注释掉主要用于测试
    data = {
        theaters: {
            theatersName: "环球厅",
            theatersStatus: true,
            cinemasId: "",
        },
        cinemas: []
    }
    //  渲染页面函数
    render() {
        this.$el.html(`
            <div style="margin-top:2px;">
                <a href="" style="font-size:16px;">放映厅管理</a><i class="layui-icon layui-icon-right" style="font-size: 16px; color: #c2c2c2;"></i>   
                <a href="" style="font-size:16px;">新增放映厅</a> 
            </div>
            <hr>
            <div>
               <h1 style="font-size:30px;width:600px;font-weight:bold;margin:30px auto 5px;padding-left:140px">新 增 放 映 厅<h1/> 
            </div>
            <div style="font-size:20px;width:600px;margin:20px auto">
                 <table style="width:600px;font-size:20px">
                    <tbody style="margin:auto;height:300px">
                         ${theatersProps.map(item => {
                                 if (item.key === "cinemasId") {
                                       return `
                                               <tr>
                                                    <td>
                                                     <span style="font-weight:bold;">${item.name}:</span>
                                                   </td>
                                                    <td > <select name="${item.key}" id="${item.key}" style="border:0px;outline:1px solid silver;width:286px;height:33px"></select>
                                                    </td>
                                                 </tr> `     
                                        } else if (item.key === "theatersStatus") {
                                         return `
                                               <tr>
                                                    <td>
                                                      <span style="font-weight:bold;">${item.name}:</span>
                                                     </td>
                                                    <td style">
                                                       <input name="${item.key}" type="radio" value=true checked>是
                                                        <input style="margin-left:48px"  name="${item.key}" type="radio" value=false>否
                                                    <td/>
                                                </tr>`
                                            } else {
                                                 return `<tr>
                                                    <td>
                                                        <span style="font-weight:bold;">${item.name}:</span>
                                                    </td>
                                                    <td>
                                                        <input style="padding:6px;width:273px;border:solid 1px silver;height:26px" name="${item.key}" type="text" value=${this.data.theaters[item.key]}>
                                                    </td> 
                                               </tr>`
                                               }
                                              }).join("")}
                            <tr>  
                                <td></td>
                                <td style=" padding-left: 14px;">
                                   <input type="button" class="layui-btn" id="addBtn" value="新增放映厅">  
                                   </td>
                                <td></td>
                            </tr>
                     </tbody>
                </table>
            </div>
        `)
         this.addBtnEle = $("#addBtn")
    }
    async addTheatersInfo() {
        // 结构的方式拿到用户输入的影厅的数据
        const {
            cinemasId, theatersName, theatersStatus
        } = this.data.theaters;
        //发送请求将用户输入的数据添加到数据库，传入的参数是影院cinemasId，影厅名字theatersName，影厅是否营业theatersStatus
        const data = await theaters.addTheaters({ cinemasId, theatersName, theatersStatus });
        if (data) {
            this.data.theaters = data;
            layer.msg("新增成功", { icon: 1 })
        } else {
            layer.msg("影厅已经存在", { icon: 1 })
        }
    }
    handle() {
        // 结构的方式拿到影厅的数据
        let {
            theaters
        } = this.data;
        // 通过便利的方式添加事件
        _.map(theaters, (v, k) => {
            if (k === "_id") {
                return
            } else if (k === "cinemasId") {
                // 下拉列表的value值变化的时候，将值同步到theaters信息中
                $(`select[name=${k}]`).on("change", e => {
                    this.data.theaters[k] = e.target.value
                })
            } else if (k === "theatersStatus") {
                $(`input[name=${k}]`).on("focus", e => {
                    this.data.theaters[k] = e.target.value
                })
            } else {
                // 给用户输入框添加输入事件，触发事件时将用户输入的值添加到theaters信息中
                $(`input[name=${k}]`).on("input", e => {
                    this.data.theaters[k] = e.target.value
                })
            }
        })

        // this.uploadBtnEle.on("click",this.upload.bind(this))
        // 新增按钮的事件
        this.addBtnEle.on("click", this.addTheatersInfo.bind(this));
    }
    async mounted() {
        // 获取影院数据
        this.data.cinemas = await theaters.getAllCinemas();
        this.rerender()
    }
    rerender() {
        $(`select[name="cinemasId"]`).html(`
        ${this.data.cinemas.map(item => {
            return `<option value=${item._id}>${item.name}</option>`
        })}      
        `)
        // 设置select的默认值,不是通过select赋值而是给this.data.theaters.cinemasId赋值
        this.data.theaters.cinemasId = this.data.cinemas[0]._id;
    }
}